<mat-card>
    <mat-card-title>Prospectus</mat-card-title>
    <mat-tab-group>        
        <mat-tab label="Search">
            <div>
                <!-- Search widget element is not visible by default -->
                <gen-search-widget
                    configId="8cb387aa-cc8b-4c1b-984a-0ea32285eebc"
                    triggerId="searchWidgetTrigger">
                </gen-search-widget>
            </div>            
            <div class="search-container">
                <app-ticker-autocomplete (tickerSelected)="setSearchTicker($event)"></app-ticker-autocomplete>
                <mat-form-field class="search-field">
                    <mat-label>Search Query</mat-label>
                    <textarea cdkTextareaAutosize matInput [(ngModel)]="searchQuery" 
                        (keydown.enter)="search()" 
                        [disabled]="searching"
                        placeholder="Search"></textarea>
                        <mat-icon matTooltip="Sample suggestion" (click)="getSuggestion()" matSuffix fontSet="material-symbols-outlined">
                    prompt_suggestion
                </mat-icon>

                </mat-form-field>
            </div>
            <div class="results-container" *ngIf="showResults">
                <mat-card class="results-card">
                    @if (searching) {
                        <mat-spinner class="search-spinner"></mat-spinner>
                    } @else {                    
                        <mat-card-title>Vertex AI Search</mat-card-title>
                        <mat-card-subtitle>Managed Service</mat-card-subtitle>
                        <div class="summary-results" [innerHTML]="summary | textToHtml"></div>
                    }
                </mat-card>
                <div class="results-spacer"></div>
                <mat-card class="results-card">
                    @if (ragSearching) {
                        <mat-spinner class="search-spinner"></mat-spinner>
                    }
                    @else {                                        
                        <mat-card-title>Databases + Vertex AI</mat-card-title>
                        <mat-card-subtitle>Platform with Gemini Models</mat-card-subtitle>
                        <app-sql-statement [query]="ragPrompt">See Prompt</app-sql-statement>
                        <div class="summary-results" [innerHTML]="ragSummary | textToHtml"></div>
                        <div>
                            <a href="https://storage.googleapis.com/genwealth-docs/{{searchTicker}}.pdf" target="_blank">
                                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0.333496H16.5C17.6 0.333496 18.5 1.2335 18.5 2.3335V16.3335C18.5 17.4335 17.6 18.3335 16.5 18.3335H2.5C1.4 18.3335 0.5 17.4335 0.5 16.3335V2.3335C0.5 1.2335 1.4 0.333496 2.5 0.333496ZM5.5 8.8335H4.5V7.8335H5.5V8.8335ZM7 8.8335C7 9.6635 6.33 10.3335 5.5 10.3335H4.5V12.3335H3V6.3335H5.5C6.33 6.3335 7 7.0035 7 7.8335V8.8335ZM14.5 7.8335H17V6.3335H13V12.3335H14.5V10.3335H16V8.8335H14.5V7.8335ZM12 10.8335C12 11.6635 11.33 12.3335 10.5 12.3335H8V6.3335H10.5C11.33 6.3335 12 7.0035 12 7.8335V10.8335ZM10.5 10.8335H9.5V7.8335H10.5V10.8335Z" fill="#EA4335"></path>
                                </svg>                                
                            </a>
                        </div>                    
                    }
                </mat-card>
            </div>
            <button mat-raised-button color="primary" class="search-button"
                 [disabled]="!searchTicker || !searchQuery || searching" 
                (click)="search()">Search</button>
                <!-- Element that opens the widget on click. It does not have to be an input -->
            <button class="mdc-button mat-mdc-raised-button vertex-button" id="searchWidgetTrigger">
                Use Widget
            </button>
        </mat-tab>
        <mat-tab label="Upload">
            <div class="upload-container">
                @if (uploading) {
                    <mat-spinner class="uploading-spinner"></mat-spinner>
                }
                @else {
                    @if (uploaded) {
                        <p>Successfully uploaded prospectus for [{{uploadTicker}}].</p>
                        <button mat-raised-button color="primary" (click)="reset()">Upload Another</button>
                    } @else {
                        <p>Provide a ticker symbol and select a prospectus to upload.</p>
                        <mat-form-field class="ticker">
                            <input matInput [(ngModel)]="uploadTicker" placeholder="Ticker" [disabled]="!showUpload">
                        </mat-form-field>
                        <input type="file" class="file-input" (change)="uploadProspectus($event)" #fileUpload>
                        <button mat-mini-fab color="primary" class="upload-button" 
                            [disabled]="!uploadTicker" (click)="fileUpload.click()">
                            <mat-icon>attach_file</mat-icon>
                        </button>
                    }
                }
            </div>
        </mat-tab>        
    </mat-tab-group>        
</mat-card>
